<template>
	<div class="poster-container">
		<!-- 用于显示的HTML版本 -->
		<div class="poster-content" ref="posterContent">
			<div class="user-info">
				<img :src="avatar" class="avatar">
				<div class="user-text">
					<div class="nickname">{{ nickName }}</div>
					<div class="title">{{ title }}</div>
				</div>
			</div>

			<div class="poster-main">
				<img :src="postImage" class="post-image">

				<div class="poster-footer">
					<div class="tip-text">{{ tip }}</div>
					<img :src="generatedQRCode" class="qrcode" alt="QR Code">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcode'
	import html2canvas from 'html2canvas'

	export default {
		props: {
			avatar: {
				type: String,
				required: true
			},
			nickName: {
				type: String,
				required: true
			},
			title: {
				type: String,
				required: true
			},
			postImage: {
				type: String,
				required: true
			},
			tip: {
				type: String,
				required: true
			},
			qrcodeUrl: {
				type: String,
				required: true
			}
		},

		data() {
			return {
				generatedQRCode: null
			}
		},

		mounted() {
			this.generateQRCode()
		},

		methods: {

			async generateQRCode() {
				try {
					if (!this.qrcodeUrl) {
						throw new Error('qrcodeUrl 不能为空')
					}

					this.generatedQRCode = await QRCode.toDataURL(this.qrcodeUrl)
					this.$nextTick(async () => {
						await this.generatePoster()
					})
				} catch (error) {
					console.error('生成二维码失败:', error.message)
					this.$emit('error', error)
				}
			},

			async generatePoster() {
				try {
					const posterElement = this.$refs.posterContent
					if (!posterElement) {
						throw new Error('无法找到海报元素')
					}

					// 使用html2canvas生成canvas
					const canvas = await html2canvas(posterElement, {
						backgroundColor: null, // 透明背景
						scale: 2, // 提高分辨率
						useCORS: true, // 允许跨域图片
						allowTaint: true, // 允许污染画布
						logging: false, // 关闭日志
						async: true // 异步加载图片
					})

					// 转换为临时文件路径
					const tempFilePath = await new Promise((resolve, reject) => {
						canvas.toBlob((blob) => {
							const reader = new FileReader()
							reader.onload = () => {
								resolve(reader.result)
							}
							reader.onerror = reject
							reader.readAsDataURL(blob)
						}, 'image/png')
					})

					this.$emit('ok', tempFilePath)

				} catch (error) {
					console.error('生成海报失败:', error)
					this.$emit('error', error)
				}
			},
		}
	}
</script>

<style scoped>
	.poster-container {
		position: relative;
	}

	.poster-content {
		background: linear-gradient(#ff5000 0%, #ff971b 100%);
		padding-bottom: 40rpx;
		overflow: hidden;
	}

	.user-info {
		overflow: hidden;
	}

	.avatar {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		margin-left: 40rpx;
		margin-top: 40rpx;
		display: block;
		float: left;
		background-color: #fff;
	}

	.user-text {
		display: inline-block;
		margin-left: 20rpx;
		margin-top: 40rpx;
		vertical-align: top;
	}

	.nickname {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		padding-bottom: 10rpx;
	}

	.title {
		font-size: 24rpx;
		color: rgba(255, 255, 255, .7);
	}

	.poster-main {
		background: #fff;
		border-radius: 16rpx;
		margin: 30rpx 40rpx 0;
		padding: 32rpx;
		box-sizing: border-box;
		box-shadow: 0 20rpx 58rpx rgba(0, 0, 0, .15);
	}

	.post-image {
		width: 100%;
		height: auto;
		border-radius: 12rpx;
		display: block;
		min-height: 606rpx;
	}

	.poster-footer {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.tip-text {
		font-size: 32rpx;
		color: #333;
		line-height: 1.8;
		width: 478rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
		display: inline-block;
		vertical-align: top;
	}

	.qrcode {
		width: 128rpx;
		height: 128rpx;
		display: inline-block;
		vertical-align: top;
	}
</style>